<template>
    <div class="p-4 md:p-6 space-y-4 md:space-y-0 md:space-x-4 flex flex-col md:flex-row">
        <div class="bg-white rounded-xl p-4 shadow-sm flex-1 card-hover">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-neutral text-sm">待处理案件</p>
                    <h3 class="text-2xl font-bold mt-1">12</h3>
                    <p class="text-success text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较昨日增加 3 件
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-danger/10 flex items-center justify-center text-danger">
                    <i class="fa fa-clock-o"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-4 shadow-sm flex-1 card-hover">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-neutral text-sm">处理中案件</p>
                    <h3 class="text-2xl font-bold mt-1">28</h3>
                    <p class="text-neutral text-xs mt-2 flex items-center">
                        <i class="fa fa-minus mr-1"></i> 与昨日持平
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-warning/10 flex items-center justify-center text-warning">
                    <i class="fa fa-spinner"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-4 shadow-sm flex-1 card-hover">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-neutral text-sm">已解决案件</p>
                    <h3 class="text-2xl font-bold mt-1">156</h3>
                    <p class="text-success text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 本周增长 12%
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-success/10 flex items-center justify-center text-success">
                    <i class="fa fa-check"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-4 shadow-sm flex-1 card-hover">
            <div class="flex items-start justify-between">
                <div>
                    <p class="text-neutral text-sm">案件解决率</p>
                    <h3 class="text-2xl font-bold mt-1">89%</h3>
                    <p class="text-success text-xs mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i> 较上月提升 3%
                    </p>
                </div>
                <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
                    <i class="fa fa-pie-chart"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>
